<template>
	<view>
		<nav-bar   fontColor="#FFFFFF" title="出库登记"></nav-bar>
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<uni-section title="表单" type="line">
			<view class="example">
				<!-- 基础用法，不包含校验规则 -->
				<uni-forms ref="baseForm" :model="baseFormData" labelWidth="80px" labelPosition="top">
					<uni-forms-item label="SO单号">
						<uni-easyinput v-model="baseFormData.name" placeholder="请输入SO单号" />
					</uni-forms-item>
					<uni-forms-item label="OMS号">
						<uni-easyinput v-model="baseFormData.name" placeholder="请输入OMS号" />
					</uni-forms-item>
					<uni-forms-item label="客户代码" required>
						<uni-easyinput v-model="baseFormData.name" placeholder="请输入客户代码" />
					</uni-forms-item>
					<uni-forms-item label="客户单号">
						<uni-easyinput v-model="baseFormData.name" placeholder="请输入客户单号" />
					</uni-forms-item>
					<uni-forms-item label="订单日期">
						<uni-datetime-picker type="datetime" return-type="timestamp"
							v-model="baseFormData.datetimesingle" />
					</uni-forms-item>
					<uni-forms-item labelWidth="80" label="要求发货日期">
						<uni-datetime-picker type="datetime" return-type="timestamp"
							v-model="baseFormData.datetimesingle" />
					</uni-forms-item>
					<!-- <uni-forms-item label="状态" required>
						<uni-data-select v-model="baseFormData.skills" :localdata="skillsRange">
						</uni-data-select>
					</uni-forms-item> -->
					<uni-forms-item label="订单类型">
						<uni-data-select v-model="baseFormData.skills" :localdata="skillsRange">
						</uni-data-select>
					</uni-forms-item>
					<uni-forms-item label="收货人代码">
						<uni-easyinput v-model="baseFormData.name" placeholder="请输入收货人代码" />
					</uni-forms-item>
					<uni-forms-item label="收货人城市" required>
						<uni-easyinput v-model="baseFormData.name" placeholder="请输入收货人城市" />
					</uni-forms-item>
					<uni-forms-item label="收货人名称">
						<uni-easyinput v-model="baseFormData.name" placeholder="请输入收货人名称" />
					</uni-forms-item>
					<uni-forms-item label="收货人地址">
						<uni-easyinput v-model="baseFormData.name" placeholder="请输入收货人地址" />
					</uni-forms-item>
					<uni-forms-item label="联系人">
						<uni-easyinput v-model="baseFormData.name" placeholder="请输入联系人" />
					</uni-forms-item>
					<uni-forms-item labelWidth="80" label="订单处理类型">
						<uni-data-select v-model="baseFormData.skills" :localdata="skillsRange">
						</uni-data-select>
					</uni-forms-item>
					<uni-forms-item label="发货人代码">
						<uni-easyinput v-model="baseFormData.name" placeholder="请输入发货人代码 " />
					</uni-forms-item>
					<uni-forms-item label="备注 " required>
						<uni-easyinput type="textarea" v-model="baseFormData.name" placeholder="请输入备注 " />
					</uni-forms-item>
				</uni-forms>
			</view>
		</uni-section>




		<uni-section style="margin-top: 20rpx;" title="明细" type="line">
			<lsj-upload ref="lsjUpload" childId="upload1" :option="option" :size="size"
				:formats="formats" :instantly="instantly" @change="onChange">
				<button type="primary" size="mini"
					style="float: right;margin-right: 20rpx;">上传附件</button>
			</lsj-upload>
			<uni-collapse v-for="(item,index) in infoList" ref="collapse">
				<uni-swipe-action-item>
					<uni-collapse-item :title="'序号-'+ (index + 1)" :open="true">
						<view class="example">
							<uni-forms ref="baseForm" :model="infoList[item]" labelWidth="80px">
								<uni-forms-item label="商品代码">
									<uni-easyinput v-model="item.commodityCode" placeholder="请输入商品代码" />
								</uni-forms-item>
								<uni-forms-item label="订单数量">
									<uni-easyinput v-model="item.orderNum" placeholder="请输入订单数量" />
								</uni-forms-item>
								<uni-forms-item label="商品名称">
									<uni-easyinput v-model="item.commodityName" placeholder="请输入商品名称" />
								</uni-forms-item>
								<uni-forms-item label="单位">
									<uni-easyinput v-model="item.unit" placeholder="请输入单位" />
								</uni-forms-item>
								<uni-forms-item label="状态">
									<uni-easyinput v-model="item.status" placeholder="请输入状态" />
								</uni-forms-item>
								<uni-forms-item label="已分配">
									<uni-easyinput v-model="item.allocated" placeholder="请输入已分配" />
								</uni-forms-item>
								<uni-forms-item label="已拣货">
									<uni-easyinput v-model="item.orderPick" placeholder="请输入已拣货" />
								</uni-forms-item>
								<uni-forms-item label="已发运">
									<uni-easyinput v-model="item.forwarding" placeholder="请输入已发运" />
								</uni-forms-item>
								<uni-forms-item label="预缺货数">
									<uni-easyinput v-model="item.stockout" placeholder="请输入预缺货数" />
								</uni-forms-item>
							</uni-forms>
						</view>
					</uni-collapse-item>
					<template v-slot:right v-if="infoList.length>1">
						<view class="slot-button" @click="deleteInfo(index)"><text class="slot-button-text">删除</text>
						</view>
					</template>
				</uni-swipe-action-item>

			</uni-collapse>
			<view style="padding: 20rpx 0;">
				<button @click="addInfoList"
					style="width: 90%;margin: 0 auto;background: #3B5DE0;color: #FFFFFF;">新增</button>
			</view>
			<view style="padding: 20rpx 0;">
				<button
					style="width: 90%;margin: 0 auto;background: #3B5DE0;color: #FFFFFF;">提交</button>
			</view>
		</uni-section>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				option: {
					// 上传服务器地址，需要替换为你的接口地址
					url: 'http://hl.j56.com/dropbox/document/upload', // 该地址非真实路径，需替换为你项目自己的接口地址
					// 上传附件的key
					name: 'file',
					// 根据你接口需求自定义请求头,默认不要写content-type,让浏览器自适配
					header: {
						// 示例参数可删除
						'Authorization': 'bearer eyJhbGciOiJSUzI1NiIsI',
						'uid': '99',
						'client': 'app',
						'accountid': 'DP',
					},
					// 根据你接口需求自定义body参数
					formData: {
						// 'orderId': 1000
					}
				},
				// 选择文件后是否立即自动上传，true=选择后立即上传
				instantly: true,
				// 限制允许上传的格式，空串=不限制，默认为空
				formats: '',
				// 文件上传大小限制
				size: 30,
				// 文件数量限制
				count: 2,
				// 文件回显列表
				files: new Map(),
				baseFormData: {

				},
				infoList: [{
					commodityCode: '', //商品代码
					orderNum: '', //订单数量
					commodityName: '', //商品名称
					unit: '', //单位
					status: '', //状态
					allocated: '', //已分配
					orderPick: '', //已拣货
					forwarding: '', //已发运
					stockout: '' //预缺货数
				}],
				skillsRange: [{
						text: '重量',
						value: 'weight'
					},
					{
						text: '体积',
						value: 'vol'
					},
					{
						text: '数量',
						value: 'qty'
					},
					{
						text: '包装',
						value: 'pack'
					}
				],
			}
		},
		methods: {
			addInfoList() {
				this.infoList.push({
					commodityCode: '', //商品代码
					orderNum: '', //订单数量
					commodityName: '', //商品名称
					unit: '', //单位
					status: '', //状态
					allocated: '', //已分配
					orderPick: '', //已拣货
					forwarding: '', //已发运
					stockout: '' //预缺货数
				})
			},
			deleteInfo(e) {
				this.infoList.splice(e, 1)
				console.log(this.infoList)
			},
			onChange(files) {
				console.log('当前选择的文件列表：', JSON.stringify([...files.values()]));
				// 更新选择的文件 
				this.files = files;
				// 强制更新视图
				this.$forceUpdate();

				// 微信小程序Map对象for循环不显示，所以转成普通数组，不要问为什么，我也不知道
				// #ifdef MP-WEIXIN
				this.wxFiles = [...this.files.values()];
				// #endif
			}
		}
	}
</script>

<style>
	page {
		background: #f5f5f5;
	}

	.content {
		padding: 20rpx;
	}

	.example {
		padding: 20rpx;
		background: #fff;
	}

	.content-box {
		flex: 1;
		/* #ifdef APP-NVUE */
		justify-content: center;
		/* #endif */
		height: 44px;
		line-height: 44px;
		padding: 0 15px;
		position: relative;
		background-color: #fff;
		border-bottom-color: #f5f5f5;
		border-bottom-width: 1px;
		border-bottom-style: solid;
	}

	.content-text {
		font-size: 15px;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: center;
		padding: 10px 0;
		background-color: #fff;
	}

	.button {
		border-color: #e5e5e5;
		border-style: solid;
		border-width: 1px;
		padding: 4px 8px;
		border-radius: 4px;
	}

	.button-text {
		font-size: 15px;
	}

	.slot-button {
		/* #ifndef APP-NVUE */
		display: flex;
		height: 100%;
		/* #endif */
		flex: 1;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding: 0 20px;
		background-color: #ff5a5f;
	}

	.slot-button-text {
		color: #ffffff;
		font-size: 14px;
	}
</style>
